<template>
  <div class="home">
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" />
    <van-grid :column-num="2" :gutter="10">
      <van-grid-item v-for="item in goodsList" :key="item.id">
        <div class="card" @click="goToDetail(item)">
          <div class="bg">
            <img class="cover-pic" :src="item.coverPicUrl" alt="">
            <div class="category-title">{{ item.name }}</div>
          </div>
          <div class="blob"></div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useMainStore } from '../stores'
import { useRouter } from 'vue-router'
import { http } from '../utils/request'

const router = useRouter()
const store = useMainStore()
const searchValue = ref('')

// 模拟商品数据
const goodsList = ref([])

const goToDetail = (item) => {
  router.push(`/series?id=${item.id}&name=${item.name}`)
}

const getList = async () => {
  const list = await http.get('/category/getFirstLevelCategory')
  goodsList.value = list
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
  :deep(.van-grid-item__content) {
    background: initial;
  }
}

.good-card {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.good-card:active {
  transform: scale(0.98);
}

.good-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.good-info {
  padding: 8px 0;
}

.good-name {
  font-size: 14px;
  color: #323233;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style scoped>
/* From Uiverse.io by dylanharriscameron */ 
.card {
  position: relative;
  width: calc(50vw - 35px);
  height: 200px;
  border-radius: 14px;
  z-index: 1111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  ;
}

.bg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: 190px;
  z-index: 2;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px);
  border-radius: 10px;
  overflow: hidden;
  outline: 2px solid white;
}

.bg > .cover-pic {
  width: 100%;
  height: 80%;
}

.bg > .category-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}

.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #e7daf8;
  opacity: 1;
  filter: blur(12px);
  animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
  0% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }

  25% {
    transform: translate(-100%, -100%) translate3d(100%, 0, 0);
  }

  50% {
    transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
  }

  75% {
    transform: translate(-100%, -100%) translate3d(0, 100%, 0);
  }

  100% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }
}
</style>